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access to a particular pipe, it is assumed that the user is authorized and authenticated through all of 
the operations of a pipe. 

A selector is passed the name of the desired functional module and the name of the organization. 
The module name is also the name of the XML document containing the structure of the page to 
be rendered. 

The XML document follows the structure of the page, like so: 



(This section describes the name, organization. & logo information for this module) 
<section> 

(This section describes any menus or button bars that appear in the page header) 
</section> 

<sub_section> 

(This section describes any button bars, drop down list selectors, combo box selectors 
data entry fields) 
</sub_section> 

<content> 

(This section describes any user interface components required for the content portion of 
the page. This can include ail of the user interface elements described previously, plus 
any applets, flash movies or other multimedia elements as required.) 

</content> 

<coolbar> 

(This section describes any selectors, checkboxes, button bars, drop down fist selectors, 
combo box selectors, or data entry fields required.) 
</toolbar> 



Where possible, we have tried to use pre-existing standards for interface definition, rather than 
making up our own. Consequently, please refer to the following two documents located at the 
following URLs to get a flavor of the philosophy behind this structure: 



XUL Programmer's Reference Manual hnp:/Atfww.mozilla.org/xpfe/xulref/ 

An example of this XML file structure, describing the NetCensus General Traffic Statistics page 
shown on page one of this specification is included on the next page. Although this description 
only describes the module, section, sub-section, and toolbar portions of the page, it should be 
enough to provide a flavor of how to define a page for use in the Marketing Framework. This file 
would be generated by an XSP script running in response to a user requesting a specific URI from 
a Cocoon server. 



<xml> 
<module> 



</module> 



XVL Tutorial 



hnp7Avww.xulplanet.com/tutorials/xultu/ 
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<?xmt versions" t.O* encoding-"UTF-8*?> 

tJ^l^'*' ^13^ ^ f ?r ' H 11 ^'^^^^'^^^- t-y fi w. Kou^nan (Centeivtfe Technotoqies/Encipeerina; - 
<modu(e name=*NetCensus" soni5ect="yes"> ^t.K.i..wi.. y/ 
<section> 

<menu name=-main- prompt* 'SELECT A SECTION *> 

<menuitem name= -General Site Traffic* vaJue=7inp7ANnk.w^if>us.cc*T^rxytraffk:7> 

<menurtem narne= 'Database Statistics" vafue= ^V/ttink. with-us.convWstatistjcs7> 

<menattem name=*Ma/*eting Performance- value- "rtttptfthint^ 

<menu.lem name= "Commercial InvestmenT value=*rrrtp7/thij*w^ 
^<menu,tem name= 'Purchase Pathway- vaJue=*http://tr^.wr*^ 

</sectkx» 

<sub_section name= "General Site Traffic* > 

<se*ector name='site_name* methods 'post* action="> 
<lisl namex-STTES- prompt="SELECT A SITES 
<ltstilem name**SALES SITES" value="l07> 
<listitem name=*- Main Portal' value="117> 
<listitem name='- Portal US' value='127> 
<!>stitem name='- Portal Europe" value*" 137> 
<listitem name="- Portal Asia" varue="147> 
<Hstitem names'- Business" value="15"/> 
<listitem name=*- Leisure* vatue='167> 
<nstilem narne="- MCC* value="177> 
<listitem name="- Cafe Express" value=*l87> 
<listitem name=*HOTEL SITES' value='207> 
<fistitem name="- Aberdeen* value="217> 
<listitem name='- Birmingham* value="227> 
<fistitem name=*- Kent" vafue="237> 
<listilem name="- London" value='247> 
</list> 

<date_picker name='FROM" class='date* action="se!ect7> 
<date_picker name= 'UNTIL" dass='date" action=*select7> 
< button name=*QO* pfompt=*go" action=*submjr/> 
</se!ector> 
</sub_section> 
<content> 

< panel width- "64%' > 
<line> 

<c heck box label=*Page Views :" vatue="18437> 

< checkbox label=*Home Page views :* value=*lS437> 
</fine> 
<line> 

<checkbox tabel="Number of Visitors :* valuer *18437> 

<checkbox labet=*No. of Visitors per day :* value=*l8437> 
</line> 
<line> 

< checkbox label='New Visitors :* value=*16437> 

<checkbox labeh=" Length of Time on site :" value=*18437> 
</line> 
<line> 

<checkbox label= 'Repeat Visitors :* va)ue=*18437> 

< check box labeb "Average no. of pages visited :* vaJue=*18437> 
</"ine> 

< table title="Most Popular Pages" type="numbered"> 

<checkbox labeU* Millennium Deals" value='l8437> 
<checkbox label='$tay.witn-us - Hotel View" value="18437> 
< checkbox label='Make a Booking" value="18437> 
< checkbox label^'Picture Gallery* value=*1&437> 
</table> 

< table bt!e=*Top Referring Sites" type= 'number ed*> 

<checkbox label=*LondonTown.com" value="18437> 

< checkbox label^'Thomas Cook* value=MB437> 
<checkbox label=* Sony.com' value="*8437> 

<rtable> 
</panel> 

< panel width='36%*>This is panel two (graph goes here) 
<7panel> 
</content> 
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< toolbar names 'expOftBar* prompt^'export to »"> 

</module> 



presentation 7> 



Section & Tag Descriptions 

<module name=" text.dispfay" sonified=" yes.or.no "> 

The <module> section of the file is used to hold any information about the pipeline that may be re- 
quired throughout the life of the document as it moves through the pipeline. This tag takes a sin- 
gle attribute which is the name of the module to display. The sonification attribute is used to in- 
voke the built-in Beatnik sounds for buttons, checkboxes, and tool bars. To date, we have defined 
the following tags: 

<organtzation> 

Specifies the name of this company (and it's associated stylesheet). 
<logo location^" text.uri or fife name *7> 

Specifies where the company's logo can be found, in either gif, jpeg, or png format. 



<section> 

The <section> portion of the file is used to hold any information about the content that needs to ap- 
pear at the immediate top of the page. Typically, this will include one or more menus or button 
bars, from which the user will make a section that will cause other portions of the page to load. 
To date, we have defined the following tags: 

<menu name=" text" prompt=" texl.display"> 

Indicates that a menu should appear in the first available position in the section. This tag 
and its associated sub-tags describe the format of the menu to be displayed. (Typically 
these will appear as DHTML drop-down menus.) The structure of this tag is loosely based 
on the XLJL standard for describing menu objects, although it is a subset of the 
specification, since many of the attributes do not make sense in the context of our 
application. 

name Name of menu object (for use with DHTML) 
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prompt Prompt text that appears in the user interface followed by a 
down arrow indicating where the user should click. 



<menuitem name=" text.display" value=" uri.destination "> 

Indicates that an item should appear in the parent menu. This tag and its associated 
properties describe the format of the item to be displayed in the menu. 

name Contains text to be displayed tor this item in the drop 
down menu. 

Value URI of the web page to display ft the user selects this 

menu item. 



<sub_section names" text.display "> 

The <sub_section> portion of the file is used to hold any information about the content that needs 
lo appear in the zone at the lower part of the top of the page. Typically, this will include one or 
more menus or button bars, or various "selector" interface widgets to allow the user to be able to 
search a database or otherwise modify what is displayed in the content section of the page. This 
lag takes a single property, the name of the sub-section, which is formatted and displayed as a title 
in the sub-section area of the page. To date, we have defined the following tags: 

<selector name=" text" method=" text.method" action=" JavaScript functions 

Indicates that a form is to be inserted here to aJlow a user to make choices that will adjust 
the contents of another section of the application. The selector lag marks the demarcation 
points for the form, and any widgets that will have their values submitted to the server 
when the user clicks on the submit button. 

name Name of the form object, which is required in order to 

manipulate the form via JavaScript / DHTML 

method Text that indicates the method for handling the HTML form 
data. 

action Can be used to invoke a JavaScript / DHTML routine when 

the user submits this form. 

<button name=" text" prompt=" text.display* 9 action=" text"> 

Indicates that a button widget with a text label should be displayed in the first avail- 
able position with in the selector to allow a user lo perform some action to the 
selector. 
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name Name of button object {required so list box contents can 
be accessed via JavaScript / DHTML). 

prompt Text that displays as a prompt on the face of the button, 
action Text that is filled in as the HTML button type. 



<date_picker name=" text " prompt=" text.di$play"> 

Indicates that a single date widget should be displayed in the first available position 
with in the selector. A date widget allows the user to be able to specify a date in 
the form of MM/DD/YYYY, where "MM" is equal to the two digit value for the 
month of the year, while "DD" is equal to the two digit value for the day of the 
month, while "YYYY" is equal to the four digit value for the century. 

name Name of datej?icker object (required so list box contents 
can be accessed via JavaScript / DHTML). The individual 
fields in the widget will be accessible as name.mm for the 
month name.dd for the day, and name.yyyy for the year. 

prompt Text that displays as a prompt directly to the left of the list 
box widget. 



<list name=" text n prompts" text.display '*> 

Indicates that either a single list box widget should be displayed in the first avail- 
able position with in the sub-section to allow a user to put together a query to mod- 
ify the specific contents of the content section of the page. 

name Name of list object {required so fist box contents can be 
accessed via JavaScript / DHTML). 

prompt Text that displays as a prompt directly to the left of the list 
box widget. 



< list item name=" text.display' 9 value=" text.value "> 

Indicates that an item should appear in the list box widget. This tag and its 
associated properties describe the format of the item to be displayed in the 
menu. 

name Contains text to be displayed for this item in the list 
box widget. 

value Text with value information (either alpha or 

numeric) that will be passed via a form submit. 
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<content> 

The <content> portion of the file is used to hold any information about the content that needs to ap- 
pear in the zone directly in the middle of the page. This can be defined in a variety of ways to re- 
flect a number of different display formats. This section can either be rendered as a single entity 
or broken down into a series of vertical "panels. Within a panel, additional content can be sped-' 
fied using either <line> or <table> tags (more information on this is available on the following 
pages). A good way to think about this structure is to consider it as being very similar to HTML 
tables where panels are equivalent to columns, and windows are equivaJent to rows. However, 
this metaphor is not completely accurate, as we encapsulate the row data within a column, where 
in an HTML table the column data is encapsulated within the row data. This was changed for two 
reasons: the first was for easier processing within the XSLT engine; while the second had to do 
with how we were expecting data to be handled within the system. 

<graph> 

Indicates that the content contained within this tag should be rendered as a graph using the 
XSLT SVG graphing stylesheet. 

<panel width=" number.percentage n > 

Indicates that a vertical panel should be created in the content section of the page. Panels 
act as a way to organize content that should be located together on the page. 

width Number used as a percentage of the width of the browser win- 
dow. Using a percentage allows us to rescale the relationship 
between individual objects within the page. Please note that 
the total width of all panels must not exceed 100%. as there is 
no error checking within the XSLT style sheet.. 

<Iine> 

Indicates that the content contained within this tag should be rendered as being on a single 
line, either inside of a panel, or simply within the entire content section of the page. Small 
lines of text, and selectors can be specified inside of <line> tags, and these will be rendered 
as a single line of content - similar in function and look and feel to a toolbar. Within a 
set of <line> tags, it is possible to specify the following lags: 

<chart_picker name=" text " prompt=" text.display" target= 

"c/?arf.na/77e"> 

Indicates that a single chart type selection widget should be displayed in the first 
available position with in the line. A chart type selection widget allows the user to 
be able to specify the plot format of the chart named in the target property for the 
tag. 

name Name of chart_picker object. 
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prompt Text that displays as a prompt directly to the left of the 
chart picker selection widget. 

target Name of the chart that this picker is associated with. 



<data prompts" text.display" type=" data. type " class= M class. type "> 

Indicates that a single piece of data should be displayed in the first available 
position with in the line. The format of the data is specified using both the type and 
class attributes as described below: 

prompt Text to display to the left of the data as an explanatory 
label. 

type Can be one of three values: NUMBER, TEXT, or 

PERCENT. Specifying TEXT forces the prompt and the 
data to have the same amount of display space. 
Specifying either NUMBER or PERCENT causes the data 
to be displayed with the prompt taking up about 80% of 
the space, and the DATA taking up about 20% of the 
display space. 

Class Can be specified as either MAJOR or MINOR. MAJOR 
data is rendered in bold and in a slightly larger type than 
MINOR data elements. 



<text> 

Used to render small amounts of text within the context of a set of <line> lags, or can be 
used by itself to render text either in a <panel> or simply stand-alone in the content sec- 
tion. 

<table title=" text.display" type=" type.table ff > 

Indicates that the content contained within this tag should be rendered in the form of a 
table, either inside of a panel, or simply within the entire content section of the page. Tab- 
les currently come in only two types - numbered and unnumbered. A numbered table gen- 
erates a list of entries with a number in front of each one, while an unnumbered table gen- 
erates them as a bulleted list. 

title Text to display as the title of the table. This text is handled 

differently depending on the XSLT and CSS style sheets used 
to create the final HTML document. 

type Determines how content is formatted within the table. 

Currently this attribute only supports two values: numbered, 
which creates a numbered list of items; and unnumbered 
which creates a bulleted list. 
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<toolbar name=" text " prompts" text.prompt "> 

The <toofbar> portion of the file is used to hold any information about the toolbar that runs along 
the bottom of the page. This can be defined in two ways - there are a series of selections {qXq. 
"tools") that can be made from the solid colored section in the middle of the bar, and typically 
these selections will all be related to each other and would directly affect the content in the content 
pane. Because of this, typically the targets of the individual toolbar elements will probably be re- 
ferences to JavaScript / DHTML routines embedded in the page. On the right section of the tool- 
bar are a series of buttons that can be used to start external events, such as sending a copy of the 
web page to a printer. 

The components in the toolbar are always rendered as text links without decoration that can be 
clicked on to initiate an action. 

name Name of toolbar object (for use with DHTML) 

prompt Prompt text that appears in the toolbar to the left of the 

selections. 



<button name=" text " label=" text.display" action=" text" tip=" text"> 

Indicates that a link with a text label should be displayed in the first available position on 
the right side of the toolbar to allow a user to perform some action that affects the page as a 
whole. 

name Name of button object (required so list box contents can 

be accessed via JavaScript / DHTML). 

label Text that displays as a prompt on the face of the toolbar. 

action Text that is used as the destination for an associated 

HREF tag. 

tip Text that appears as a "tool tip" when the user leaves 

the cursor over the link for more than a couple of 
seconds. 



<tool name=" text " label=" text.display" action=" text " tip=" text "> 

Indicates that a link with a text label should be displayed in the first available position with 
in the middle of the toolbar to allow a user to perform some action related to the content in 
the content section. 

name Name of button object {required so list box contents can 

be accessed via JavaScript / DHTML). 

label Text that displays as a prompt on the face of the toolbar. 

action Text that is used as the destination for an associated 

HREF tag. 
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tip Text that appears as a "tool tip" when the user leaves 

the cursor over the link for more than a couple of 
seconds. 



<T.B.D. > 
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